<template>
  <view class="activity-container">
    <!-- 顶部操作栏 -->
    <view class="action-bar">
      <button class="add-button" @click="showAddModal">添加优惠</button>
    </view>

    <!-- 加载状态 -->
    <view v-if="loading" class="loading-container">
      <text class="loading-text">加载中...</text>
    </view>

    <!-- 优惠列表 -->
    <view v-else class="activity-list">
      <view v-if="activities.length === 0" class="empty-container">
        <text class="empty-text">暂无优惠券</text>
      </view>
      <view class="activity-item" v-for="(activity, index) in activities" :key="activity.couponId || index">
        <view class="activity-header">
          <view class="activity-type" :class="getActivityTypeClass(activity.couponType)">
            {{ getActivityTypeText(activity.couponType) }}
          </view>
          <view class="activity-status" :class="{ 'status-off': !activity.couponStatus }">
            {{ activity.couponStatus ? '可用' : '禁用' }}
          </view>
        </view>
        
        <view class="activity-content">
          <view class="activity-info">
            <text class="activity-name">{{ activity.couponName }}</text>
            <text class="activity-time">使用期限: {{ activity.term }}天</text>
            <text class="activity-desc">{{ activity.couponDescribe }}</text>
          </view>
          <view class="activity-rules">
            <view class="rule-item">
              <text class="rule-text">优惠类型: {{ getActivityTypeText(activity.couponType) }}</text>
            </view>
            <view class="rule-item" v-if="activity.discount">
              <text class="rule-text">折扣: {{ (activity.discount * 10).toFixed(0) }}折</text>
            </view>
            <view class="rule-item" v-if="activity.minAmount">
              <text class="rule-text">满减条件: 满{{ activity.minAmount }}元</text>
            </view>
            <view class="rule-item" v-if="activity.reduceAmount">
              <text class="rule-text">减免金额: {{ activity.reduceAmount }}元</text>
            </view>
            <view class="rule-item" v-if="activity.needPoint">
              <text class="rule-text">所需积分: {{ activity.needPoint }}分</text>
            </view>
          </view>
        </view>

        <view class="activity-footer">
          <view class="activity-stats">
            <text class="stat-item">优惠券ID: {{ activity.couponId }}</text>
            <text class="stat-item">状态: {{ activity.couponStatus ? '可用' : '禁用' }}</text>
          </view>
          <view class="activity-actions">
            <button class="action-btn edit" @click="editActivity(activity)">编辑</button>
            <button class="action-btn" :class="activity.couponStatus ? 'off' : 'on'" @click="toggleStatus(activity)">
              {{ activity.couponStatus ? '禁用' : '启用' }}
            </button>
          </view>
        </view>
      </view>
    </view>

    <!-- 添加优惠券弹窗 -->
    <uni-popup ref="addPopup" type="center" :mask-click="false">
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">添加优惠券</text>
          <text class="popup-close" @click="hideAddModal">×</text>
        </view>
        
        <view class="popup-body">
          <view class="form-item">
            <text class="form-label">优惠券名称</text>
            <input class="form-input" v-model="formData.couponName" placeholder="请输入优惠券名称" />
          </view>
          
          <view class="form-item">
            <text class="form-label">优惠券类型</text>
            <!-- 使用按钮组替代picker -->
            <view class="type-buttons">
              <button 
                class="type-btn" 
                :class="{ active: formData.couponType === 0 }"
                @click="selectType(0)"
              >折扣</button>
              <button 
                class="type-btn" 
                :class="{ active: formData.couponType === 1 }"
                @click="selectType(1)"
              >满减</button>
              <button 
                class="type-btn" 
                :class="{ active: formData.couponType === 2 }"
                @click="selectType(2)"
              >立减</button>
            </view>
          </view>
          
          <view class="form-item" v-if="formData.couponType === 0">
            <text class="form-label">折扣值</text>
            <input class="form-input" type="number" v-model="formData.discount" placeholder="请输入折扣值(0.1-1.0)" />
          </view>
          
          <view class="form-item" v-if="formData.couponType === 1">
            <text class="form-label">满减条件</text>
            <input class="form-input" type="number" v-model="formData.minAmount" placeholder="请输入满减条件金额" />
          </view>
          
          <view class="form-item" v-if="formData.couponType === 1 || formData.couponType === 2">
            <text class="form-label">减免金额</text>
            <input class="form-input" type="number" v-model="formData.reduceAmount" placeholder="请输入减免金额" />
          </view>
          
          <view class="form-item">
            <text class="form-label">使用期限(天)</text>
            <input class="form-input" type="number" v-model="formData.term" placeholder="请输入使用期限" />
          </view>
          
          <view class="form-item">
            <text class="form-label">所需积分</text>
            <input class="form-input" type="number" v-model="formData.needPoint" placeholder="请输入所需积分" />
          </view>
          
          <view class="form-item">
            <text class="form-label">优惠券描述</text>
            <textarea class="form-textarea" v-model="formData.couponDescribe" placeholder="请输入优惠券描述" />
          </view>
        </view>
        
        <view class="popup-footer">
          <button class="popup-btn cancel" @click="hideAddModal">取消</button>
          <button class="popup-btn confirm" @click="submitForm">确定</button>
        </view>
      </view>
    </uni-popup>

    <!-- 编辑优惠券弹窗 -->
    <uni-popup ref="editPopup" type="center" :mask-click="false">
      <view class="popup-content">
        <view class="popup-header">
          <text class="popup-title">编辑优惠券</text>
          <text class="popup-close" @click="hideEditModal">×</text>
        </view>
        
        <view class="popup-body">
          <view class="form-item">
            <text class="form-label">优惠券名称</text>
            <input class="form-input" v-model="editData.couponName" placeholder="请输入优惠券名称" />
          </view>
          
          <view class="form-item">
            <text class="form-label">优惠券类型</text>
            <view class="type-buttons">
              <button 
                class="type-btn" 
                :class="{ active: editData.couponType === 0 }"
                @click="selectEditType(0)"
              >折扣</button>
              <button 
                class="type-btn" 
                :class="{ active: editData.couponType === 1 }"
                @click="selectEditType(1)"
              >满减</button>
              <button 
                class="type-btn" 
                :class="{ active: editData.couponType === 2 }"
                @click="selectEditType(2)"
              >立减</button>
            </view>
          </view>
          
          <view class="form-item" v-if="editData.couponType === 0">
            <text class="form-label">折扣值</text>
            <input class="form-input" type="number" v-model="editData.discount" placeholder="请输入折扣值(0.1-1.0)" />
          </view>
          
          <view class="form-item" v-if="editData.couponType === 1">
            <text class="form-label">满减条件</text>
            <input class="form-input" type="number" v-model="editData.minAmount" placeholder="请输入满减条件金额" />
          </view>
          
          <view class="form-item" v-if="editData.couponType === 1 || editData.couponType === 2">
            <text class="form-label">减免金额</text>
            <input class="form-input" type="number" v-model="editData.reduceAmount" placeholder="请输入减免金额" />
          </view>
          
          <view class="form-item">
            <text class="form-label">使用期限(天)</text>
            <input class="form-input" type="number" v-model="editData.term" placeholder="请输入使用期限" />
          </view>
          
          <view class="form-item">
            <text class="form-label">所需积分</text>
            <input class="form-input" type="number" v-model="editData.needPoint" placeholder="请输入所需积分" />
          </view>
          
          <view class="form-item">
            <text class="form-label">优惠券描述</text>
            <textarea class="form-textarea" v-model="editData.couponDescribe" placeholder="请输入优惠券描述" />
          </view>
        </view>
        
        <view class="popup-footer">
          <button class="popup-btn cancel" @click="hideEditModal">取消</button>
          <button class="popup-btn confirm" @click="submitEditForm">确定</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { couponApi } from '../../utils/api.js'

export default {
  data() {
    return {
      activities: [],
      loading: true,
      typeIndex: 0,
      typeOptions: ['折扣', '满减', '立减'],
      typeValues: [0, 1, 2], // 对应的后端枚举值
      formData: {
        couponName: '',
        couponType: 0, // 使用数字值
        discount: 0.8,
        minAmount: 0,
        reduceAmount: 0,
        term: 30,
        needPoint: 0,
        couponDescribe: ''
      },
      editData: {
        couponId: null,
        couponName: '',
        couponType: 0,
        discount: 0.8,
        minAmount: 0,
        reduceAmount: 0,
        term: 30,
        needPoint: 0,
        couponStatus: true,
        couponDescribe: ''
      }
    }
  },
  onLoad() {
    console.log('页面加载，开始调用loadCoupons方法')
    this.loadCoupons()
  },
  onShow() {
    console.log('页面显示')
  },
  methods: {
    // 加载优惠券数据
    async loadCoupons() {
      console.log('loadCoupons方法被调用')
      try {
        this.loading = true
        console.log('准备发送请求获取优惠券列表')
        
        const response = await couponApi.getCouponList()
        
        console.log('请求响应:', response)
        
        if (response.code === 200) {
          this.activities = response.data || []
          // 处理优惠券类型显示
          this.activities.forEach(activity => {
            // 确保couponStatus是布尔值
            if (typeof activity.couponStatus === 'number') {
              activity.couponStatus = activity.couponStatus === 1;
            }
          });
          console.log('获取到的优惠券数据:', this.activities)
        } else {
          console.log('请求失败，错误信息:', response.message)
          uni.showToast({
            title: response.message || '获取优惠券失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('获取优惠券失败:', error)
        uni.showToast({
          title: '获取优惠券失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
        console.log('loadCoupons方法执行完成')
      }
    },
    
    navigateTo(url) {
      uni.navigateTo({
        url: url
      })
    },
    
    getActivityTypeText(type) {
      const typeMap = {
        'DISCOUNT': '折扣',
        'FULL_MINUS': '满减',
        'INSTANT_REDUCTION': '立减',
        0: '折扣',
        1: '满减',
        2: '立减'
      };
      return typeMap[type] || '未知类型';
    },
    
    getActivityTypeClass(type) {
      const classMap = {
        'DISCOUNT': 'discount',
        'FULL_MINUS': 'full-reduction',
        'INSTANT_REDUCTION': 'instant-reduction',
        0: 'discount',
        1: 'full-reduction',
        2: 'instant-reduction'
      };
      return classMap[type] || 'coupon';
    },
    
    editActivity(activity) {
      // 将字符串类型转换为数字类型
      let couponType = activity.couponType;
      if (typeof couponType === 'string') {
        const typeMap = {
          'DISCOUNT': 0,
          'FULL_MINUS': 1,
          'INSTANT_REDUCTION': 2
        };
        couponType = typeMap[couponType] || 0;
      }
      
      this.editData = {
        couponId: activity.couponId,
        couponName: activity.couponName,
        couponType: couponType,
        discount: activity.discount || 0.8,
        minAmount: activity.minAmount || 0,
        reduceAmount: activity.reduceAmount || 0,
        term: activity.term || 30,
        needPoint: activity.needPoint || 0,
        couponStatus: activity.couponStatus,
        couponDescribe: activity.couponDescribe || ''
      };
      this.$refs.editPopup.open();
    },
    
    toggleStatus(activity) {
      uni.showModal({
        title: '提示',
        content: `确定要${activity.couponStatus ? '禁用' : '启用'}该优惠券吗？`,
        success: (res) => {
          if (res.confirm) {
            this.updateCouponStatus(activity);
          }
        }
      });
    },
    
    async updateCouponStatus(activity) {
      try {
        uni.showLoading({
          title: activity.couponStatus ? '禁用中...' : '启用中...'
        });
        
        // 准备更新的数据
        const updateData = {
          couponId: activity.couponId,
          couponName: activity.couponName,
          couponType: activity.couponType,
          discount: activity.discount,
          minAmount: activity.minAmount,
          reduceAmount: activity.reduceAmount,
          term: activity.term,
          needPoint: activity.needPoint,
          couponStatus: !activity.couponStatus, // 切换状态
          couponDescribe: activity.couponDescribe
        };
        
        console.log('更新状态数据:', updateData);
        
        // 调用更新优惠券API
        const response = await couponApi.updateCoupon(updateData);
        
        if (response.code === 200) {
          // 更新本地状态
          activity.couponStatus = !activity.couponStatus;
          uni.showToast({
            title: activity.couponStatus ? '优惠券已启用' : '优惠券已禁用',
            icon: 'success'
          });
        } else {
          uni.showToast({
            title: response.message || '操作失败',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('更新优惠券状态失败:', error);
        uni.showToast({
          title: '操作失败',
          icon: 'none'
        });
      } finally {
        uni.hideLoading();
      }
    },

    showAddModal() {
      this.$refs.addPopup.open();
    },

    hideAddModal() {
      this.$refs.addPopup.close();
    },

    onTypeChange(e) {
      this.formData.couponType = this.typeValues[e.detail.value];
    },

    onPickerClick() {
      console.log('Picker clicked');
    },

    submitForm() {
      // 表单验证
      if (!this.formData.couponName.trim()) {
        uni.showToast({
          title: '请输入优惠券名称',
          icon: 'none'
        });
        return;
      }
      
      if (!this.formData.term || this.formData.term <= 0) {
        uni.showToast({
          title: '请输入有效的使用期限',
          icon: 'none'
        });
        return;
      }
      
      // 根据优惠券类型验证特定字段
      if (this.formData.couponType === 0) {
        if (!this.formData.discount || this.formData.discount <= 0 || this.formData.discount > 1) {
          uni.showToast({
            title: '请输入有效的折扣值(0.1-1.0)',
            icon: 'none'
          });
          return;
        }
      } else if (this.formData.couponType === 1) {
        if (!this.formData.minAmount || this.formData.minAmount <= 0) {
          uni.showToast({
            title: '请输入有效的满减条件金额',
            icon: 'none'
          });
          return;
        }
        if (!this.formData.reduceAmount || this.formData.reduceAmount <= 0) {
          uni.showToast({
            title: '请输入有效的减免金额',
            icon: 'none'
          });
          return;
        }
      } else if (this.formData.couponType === 2) {
        if (!this.formData.reduceAmount || this.formData.reduceAmount <= 0) {
          uni.showToast({
            title: '请输入有效的减免金额',
            icon: 'none'
          });
          return;
        }
      }
      
      // 提交表单
      this.createCoupon();
    },
    
    async createCoupon() {
      try {
        uni.showLoading({
          title: '创建中...'
        });
        
        // 准备提交的数据
        const submitData = {
          couponName: this.formData.couponName,
          couponType: this.formData.couponType, // 数字值：0=折扣，1=满减，2=立减
          discount: this.formData.couponType === 0 ? parseFloat(this.formData.discount) : null,
          minAmount: this.formData.couponType === 1 ? parseFloat(this.formData.minAmount) : null,
          reduceAmount: (this.formData.couponType === 1 || this.formData.couponType === 2) ? parseFloat(this.formData.reduceAmount) : null,
          term: parseInt(this.formData.term),
          needPoint: parseInt(this.formData.needPoint) || 0,
          couponStatus: true, // 新创建的优惠券默认为可用状态
          couponDescribe: this.formData.couponDescribe
        };
        
        console.log('提交的数据:', submitData);
        
        // 调用创建优惠券API
        const response = await couponApi.createCoupon(submitData);
        
        if (response.code === 200) {
          uni.showToast({
            title: '创建成功',
            icon: 'success'
          });
          
          // 关闭弹窗并刷新列表
          this.hideAddModal();
          this.resetForm();
          this.loadCoupons();
        } else {
          uni.showToast({
            title: response.message || '创建失败',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('创建优惠券失败:', error);
        uni.showToast({
          title: '创建失败',
          icon: 'none'
        });
      } finally {
        uni.hideLoading();
      }
    },
    
    resetForm() {
      this.formData = {
        couponName: '',
        couponType: 0,
        discount: 0.8,
        minAmount: 0,
        reduceAmount: 0,
        term: 30,
        needPoint: 0,
        couponDescribe: ''
      };
      this.typeIndex = 0;
    },

    selectType(type) {
      this.formData.couponType = type;
    },

    selectEditType(type) {
      this.editData.couponType = type;
    },

    hideEditModal() {
      this.$refs.editPopup.close();
    },

    submitEditForm() {
      // 表单验证
      if (!this.editData.couponName.trim()) {
        uni.showToast({
          title: '请输入优惠券名称',
          icon: 'none'
        });
        return;
      }
      
      if (!this.editData.term || this.editData.term <= 0) {
        uni.showToast({
          title: '请输入有效的使用期限',
          icon: 'none'
        });
        return;
      }
      
      // 根据优惠券类型验证特定字段
      if (this.editData.couponType === 0) {
        if (!this.editData.discount || this.editData.discount <= 0 || this.editData.discount > 1) {
          uni.showToast({
            title: '请输入有效的折扣值(0.1-1.0)',
            icon: 'none'
          });
          return;
        }
      } else if (this.editData.couponType === 1) {
        if (!this.editData.minAmount || this.editData.minAmount <= 0) {
          uni.showToast({
            title: '请输入有效的满减条件金额',
            icon: 'none'
          });
          return;
        }
        if (!this.editData.reduceAmount || this.editData.reduceAmount <= 0) {
          uni.showToast({
            title: '请输入有效的减免金额',
            icon: 'none'
          });
          return;
        }
      } else if (this.editData.couponType === 2) {
        if (!this.editData.reduceAmount || this.editData.reduceAmount <= 0) {
          uni.showToast({
            title: '请输入有效的减免金额',
            icon: 'none'
          });
          return;
        }
      }
      
      // 提交表单
      this.updateCoupon();
    },
    
    async updateCoupon() {
      try {
        uni.showLoading({
          title: '更新中...'
        });
        
        // 准备提交的数据
        const submitData = {
          couponId: this.editData.couponId,
          couponName: this.editData.couponName,
          couponType: this.editData.couponType, // 数字值：0=折扣，1=满减，2=立减
          discount: this.editData.couponType === 0 ? parseFloat(this.editData.discount) : null,
          minAmount: this.editData.couponType === 1 ? parseFloat(this.editData.minAmount) : null,
          reduceAmount: (this.editData.couponType === 1 || this.editData.couponType === 2) ? parseFloat(this.editData.reduceAmount) : null,
          term: parseInt(this.editData.term),
          needPoint: parseInt(this.editData.needPoint) || 0,
          couponStatus: this.editData.couponStatus,
          couponDescribe: this.editData.couponDescribe
        };
        
        console.log('提交的编辑数据:', submitData);
        
        // 调用更新优惠券API
        const response = await couponApi.updateCoupon(submitData);
        
        if (response.code === 200) {
          uni.showToast({
            title: '更新成功',
            icon: 'success'
          });
          
          // 关闭弹窗并刷新列表
          this.hideEditModal();
          this.loadCoupons();
        } else {
          uni.showToast({
            title: response.message || '更新失败',
            icon: 'none'
          });
        }
      } catch (error) {
        console.error('更新优惠券失败:', error);
        uni.showToast({
          title: '更新失败',
          icon: 'none'
        });
      } finally {
        uni.hideLoading();
      }
    }
  }
}
</script>

<style>
.activity-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx;
}

.action-bar {
  margin-bottom: 20rpx;
}

.add-button {
  background-color: #C70209;
  color: #ffffff;
  font-size: 28rpx;
  padding: 0 30rpx;
  height: 70rpx;
  line-height: 70rpx;
  border-radius: 35rpx;
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200rpx;
}

.loading-text {
  font-size: 28rpx;
  color: #999;
}

.empty-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
}

.activity-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.activity-item {
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 20rpx;
}

.activity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20rpx;
}

.activity-type {
  font-size: 24rpx;
  padding: 4rpx 12rpx;
  border-radius: 4rpx;
  color: #ffffff;
}

.activity-type.discount {
  background-color: #1890ff;
}

.activity-type.full-reduction {
  background-color: #52c41a;
}

.activity-type.instant-reduction {
  background-color: #722ed1;
}

.activity-type.coupon {
  background-color: #fa8c16;
}

.activity-type.cash {
  background-color: #f5222d;
}

.activity-status {
  font-size: 24rpx;
  color: #07c160;
}

.status-off {
  color: #999;
}

.activity-content {
  margin-bottom: 20rpx;
}

.activity-info {
  margin-bottom: 20rpx;
}

.activity-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 10rpx;
  display: block;
}

.activity-time {
  font-size: 24rpx;
  color: #999;
  margin-bottom: 10rpx;
  display: block;
}

.activity-desc {
  font-size: 26rpx;
  color: #666;
  display: block;
}

.activity-rules {
  background-color: #f8f8f8;
  border-radius: 8rpx;
  padding: 20rpx;
}

.rule-item {
  font-size: 24rpx;
  color: #666;
  margin-bottom: 10rpx;
}

.rule-item:last-child {
  margin-bottom: 0;
}

.activity-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 20rpx;
  border-top: 1rpx solid #f5f5f5;
}

.activity-stats {
  display: flex;
  gap: 20rpx;
}

.stat-item {
  font-size: 24rpx;
  color: #999;
}

.activity-actions {
  display: flex;
  gap: 20rpx;
}

.action-btn {
  font-size: 24rpx;
  padding: 0 20rpx;
  height: 50rpx;
  line-height: 50rpx;
  border-radius: 25rpx;
}

.action-btn.edit {
  background-color: #e6f7ff;
  color: #1890ff;
}

.action-btn.off {
  background-color: #fff1f0;
  color: #ff4d4f;
}

.action-btn.on {
  background-color: #f6ffed;
  color: #52c41a;
}

/* 弹窗样式 */
.popup-content {
  background-color: #ffffff;
  border-radius: 12rpx;
  width: 600rpx;
  max-height: 80vh;
  overflow-y: auto;
}

.popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.popup-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.popup-close {
  font-size: 40rpx;
  color: #999;
  cursor: pointer;
}

.popup-body {
  padding: 30rpx;
}

.form-item {
  margin-bottom: 30rpx;
}

.form-label {
  display: block;
  font-size: 28rpx;
  color: #333;
  margin-bottom: 15rpx;
}

.form-input {
  width: 100%;
  height: 80rpx;
  border: 1rpx solid #d9d9d9;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

.form-textarea {
  width: 100%;
  height: 120rpx;
  border: 1rpx solid #d9d9d9;
  border-radius: 8rpx;
  padding: 20rpx;
  font-size: 28rpx;
  box-sizing: border-box;
  resize: none;
}

.form-picker {
  width: 100%;
  height: 80rpx;
  border: 1rpx solid #d9d9d9;
  border-radius: 8rpx;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  box-sizing: border-box;
  background-color: #ffffff;
  position: relative;
}

.picker-text {
  font-size: 28rpx;
  color: #333;
  flex: 1;
}

.form-picker::after {
  content: '';
  position: absolute;
  right: 20rpx;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-left: 10rpx solid transparent;
  border-right: 10rpx solid transparent;
  border-top: 10rpx solid #999;
}

.popup-footer {
  display: flex;
  justify-content: space-between;
  padding: 30rpx;
  border-top: 1rpx solid #f0f0f0;
  gap: 20rpx;
}

.popup-btn {
  flex: 1;
  height: 80rpx;
  border-radius: 8rpx;
  font-size: 28rpx;
  border: none;
}

.popup-btn.cancel {
  background-color: #f5f5f5;
  color: #666;
}

.popup-btn.confirm {
  background-color: #C70209;
  color: #ffffff;
}

.type-buttons {
  display: flex;
  gap: 10rpx;
}

.type-btn {
  flex: 1;
  background-color: #f5f5f5;
  border: 1rpx solid #d9d9d9;
  padding: 0 20rpx;
  height: 60rpx;
  line-height: 60rpx;
  border-radius: 8rpx;
  font-size: 26rpx;
  color: #666;
  text-align: center;
}

.type-btn.active {
  background-color: #C70209;
  color: #ffffff;
  border-color: #C70209;
}
</style> 